<template>
  <div>
    <!-- 没有参数的v-bind会将一个对象的所有属性都作为attribute应用到目标元素上 -->
    <!-- 想让所有像 class和v-on监听器这样的透传attribute都应用在内部的button上，而不是外层的 <div> 上，可以通过设定 inheritAttrs: false和 v-bind="$attrs"来实现 -->
    <button @click="clickMe" v-bind="$attrs">click me</button>
    <!-- 这些透传进来的 attribute 可以在模板的表达式中直接用 $attrs 访问到 -->
    <!-- 这个 $attrs 对象包含了除组件的 props 和 emits 属性外的所有其他 attribute，例如class，style，v-on监听器等 -->
    <p>{{ $attrs.onGive() }}</p>
  </div>
</template>

<script setup>
// 透传的 attribute 不会包含 当前组件 声明过的 props 或是针对 emits 声明事件的 v-on 侦听函数。换句话说，声明过的 props 和侦听函数被当前组件消费了
defineProps(['name'])
defineEmits(['click'])
function clickMe() {
  console.log('我是子组件的点击事件');
}
// 禁用 Attribute 继承
// 如果你不想要一个组件自动地继承 attribute，可以在组件选项中设置 inheriteAttrs: false。如果你使用了 <script setup>，需要一个额外的 <script>块来书写这个选项声明
</script>
<script>
export default {
  inheritAttrs: false
}
</script>

<style scoped>

</style>